// 响应式断点 Mixins
// 使用方式: @include mobile { ... }

// 超小屏幕 (480px及以下)
@mixin mobile-small {
    @media (max-width: 480px) {
        @content;
    }
}

// 移动端 (768px及以下)
@mixin mobile {
    @media (max-width: 768px) {
        @content;
    }
}

// 平板端 (1024px及以下)
@mixin tablet {
    @media (max-width: 1024px) {
        @content;
    }
}

// 大屏幕 (1440px及以下)
@mixin desktop-small {
    @media (max-width: 1440px) {
        @content;
    }
}

// 超大屏幕 (1920px及以下)
@mixin desktop-large {
    @media (max-width: 1920px) {
        @content;
    }
}

// 自定义断点
@mixin breakpoint($size) {
    @media (max-width: $size) {
        @content;
    }
}

// 范围断点 (min-width 到 max-width)
@mixin breakpoint-between($min, $max) {
    @media (min-width: $min) and (max-width: $max) {
        @content;
    }
}

// 最小宽度断点
@mixin breakpoint-min($size) {
    @media (min-width: $size) {
        @content;
    }
}
